<template>
	<view>
		<!-- 空盒子用来防止消息过少时 拉起键盘会遮盖消息 -->
		<view :animation="anData" style="height:0;"></view>
		<!-- <mescroll-body ref="mescrollRef" bottom="50%" @init="mescrollInit" :down="downOption" @down="downCallback" -->
		<!-- :up="upOption"> -->
		<!-- 消息体 -->
		<scroll-view scroll-with-animation :refresher-enabled="isOpenRefresh" :refresher-triggered="trigger"
			@refresherrefresh="refresherrefresh" scroll-y @touchmove="hideKey" style="width: 750rpx;"
			:style="{ height: srcollHeight }" :scroll-top="go">
			<!-- 用来获取消息体高度 -->
			<view id="okk" scroll-with-animation>
				<view class="all-history-loaded">{{ allHistoryLoaded ? '已经没有更多的历史消息' : '下拉获取历史消息' }}</view>
				<!-- 消息 -->
				<view class="flex-column-start" v-for="(x, i) in msgList" :key="i">
					<view class="time-lag" :style="i>0?'time-lag-top20':''">{{ renderMessageDate(x, i) }}</view>
					<!-- 用户消息 头像可选加入-->
					<view v-if="x.my" class="flex justify-end padding-right one-show  align-start  padding-top">
						<!-- 	<image v-if="!x.my" class="chat-img" src="../../static/..." mode="aspectFill" ></image> -->
						<view class="flex justify-end" style="width: 400rpx;">
							<view class="margin-left padding-chat bg-cyan" style="border-radius: 35rpx;">
								<text style="word-break: break-all;" selectable>{{ x.msg }}</text>
							</view>
						</view>
						<!-- <image class="chat-img margin-left" src="../../static/..." mode="aspectFill" ></image> -->
					</view>
					<!-- 机器人消息 -->
					<view v-if="!x.my" class="flex-row-start margin-left margin-top one-show">
						<view class="chat-img flex-row-center">
							<image style="height: 75rpx;width: 75rpx;" src="../../../static/img/robt.png"
								mode="aspectFit"></image>
						</view>
						<view class="flex" style="width: 500rpx;">
							<view class="margin-left padding-chat flex-column-start"
								style="border-radius: 35rpx;background-color: #f9f9f9;">
								<text style="word-break: break-all;" selectable>{{ x.msg }}</text>
								<!-- 消息模板 =>初次问候 -->
								<view class="flex-column-start" v-if="x.type == 1 && x.questionList.length>0"
									style="color: #12ae85;">
									<text style="color: #838383;font-size: 22rpx;margin-top: 15rpx;">您可以这样问我:</text>
									<text @click="answer(item)" style="margin-top: 10upx;" selectable
										v-for="(item, index) in x.questionList" :key="index">{{ item.ask }}</text>
									<view class="flex-row-between  padding-top-sm" v-if="totalPage > 1">
										<text class="my-neirong-sm">没有您要的答案?</text>
										<text class="padding-left" style="color: #12ae85;"
											@click="switchAsks">换一批</text>
									</view>
								</view>
								<!-- 消息模板 =>多个答案 -->
								<view class="flex-column-start" v-if="x.type == 2" style="color: #2fa39b;">
									<text style="color: #838383;font-size: 22rpx;margin-top: 15rpx;">猜您想问:</text>
									<!-- 连接服务器应该用item.id -->
									<text @click="answer(item)" style="margin-top: 30rpx;"
										v-for="(item, index) in x.questionList" :key="index"
										selectable>{{ item.ask }}</text>
								</view>
								<!-- 消息模板 => 无法回答-->
								<!-- <view class="flex-column-start" v-if="x.type == 0">
									<text class="padding-top-sm" style="color: #2fa39b;">提交意见与反馈</text>
									<text style="color: #838383;font-size: 22rpx;margin-top: 15rpx;">下面是一些常见问题,您可以点击对应的文字快速获取答案:</text>
									<text @click="answer(item)" style="margin-top: 30rpx;color: #2fa39b;" v-for="(item, index) in x.questionList" :key="index">{{ item.ask }}</text>
									<view class="flex-row-between  padding-top-sm" v-if="totalPage>1">
										<text class="my-neirong-sm">没有您要的答案?</text>
										<text class="padding-left" style="color: #1396c5;" @click="switchAsks">换一批</text>
									</view>
								</view> -->
							</view>
						</view>
					</view>
				</view>
				<!-- loading是显示 -->
				<view v-show="msgLoad" class="flex-row-start margin-left margin-top">
					<view class="chat-img flex-row-center">
						<image style="height: 75rpx;width: 75rpx;" src="../../../static/img/robt.png" mode="aspectFit">
						</image>
					</view>
					<view class="flex" style="width: 500rpx;">
						<view class="margin-left padding-chat flex-column-start"
							style="border-radius: 35rpx;background-color: #f9f9f9;">
							<view class="cuIcon-loading turn-load" style="font-size: 35rpx;color: #3e9982;"></view>
						</view>
					</view>
				</view>
				<!-- 防止消息底部被遮 -->
				<view style="height: 120rpx;"></view>
			</view>
		</scroll-view>
		<!-- </mescroll-body> -->
		<!-- 底部导航栏 -->
		<view class="flex-column-center" style="position: fixed;bottom: -180px;" :animation="animationData">
			<view class="bottom-dh-char flex-row-around" style="font-size: 55rpx;">
				<text @click="contactUs" class="yzb yzb-jiaoseqiehuan"></text>
				<!-- vue无法使用软键盘"发送" -->
				<input v-model="msg" class="dh-input" type="text" style="background-color: #f0f0f0;" @confirm="sendMsg"
					confirm-type="search" maxlength="-1" placeholder-class="my-neirong-sm" placeholder="请用一句话描述您的问题" />
				<view @click="sendMsg" class="cu-tag bg-cyan round">发送</view>
				<!-- <text @click="ckAdd" class="yzb yzb-jia"></text> -->
			</view>
			<!-- 附加栏(自定义) -->
			<view class="box-normal flex-row-around flex-wrap">
				<view class="tb-text">
					<view class="yzb yzb-yijianfankui"></view>
					<text>问题反馈</text>
				</view>
				<view class="tb-text">
					<view class="yzb yzb-kefuguanli"></view>
					<text>人工客服</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex';
	import config from "@/config/index.config.js";
	// rpx和px的比率
	var l;
	// 可用窗口高度
	var wh;
	// 顶部空盒子的高度
	var mgUpHeight;

	export default {
		computed: {
			...mapState(['userInfo']),
			...mapGetters(['hasLogin'])
		},
		data() {
			return {
				trigger: false,
				isOpenRefresh: true,
				allHistoryLoaded: false,

				msgLoad: false,
				anData: {},
				animationData: {},
				showTow: false,
				// 消息体,定义机器人初次的消息(或者自定义出现时机)
				// my->谁发的消息 msg->消息文本 type->客服消息模板类型 questionList->快速获取问题答案的问题列表
				msgList: [],
				defaultMsg: {
					my: 0,
					msg: '请问有什么问题可以帮助您?',
					type: 1,
					questionList: []
				},
				msg: '',
				go: 0,
				srcollHeight: 0,
				list: [],
				query: {
					pageNo: 1,
					pageSize: 5,
				},
				query2: {
					pageNo: 1,
					pageSize: 10
				},
				totalPage: 0,
				questionList: [],

				connected: false,
				connecting: false,
				tempMsg: "",
				concatMsg: "", //拼接信息
				aiNum:0,
				socketTask:null,
				timer: null,
				received:false,
			};
		},

		onLoad() {
			this.initView();
			this.getChatAskList();
			this.getRobotLogList();
			this.connect();
		},
		
		onShow() {
			this.getParamLimit();
		},

		onUnload() {
			uni.closeSocket({
				code: 1000,
				reason: 'close reason from client',
				success(res) {
					console.log('uni.closeSocket success', res)
				},
				fail(err) {
					console.log('uni.closeSocket fail', err)
				},
			})
		},

		onPullDownRefresh() {
			console.log('onPullDownRefresh===');
			this.query2.pageNo++;
			this.getRobotLogList();
		},
		
		onNavigationBarButtonTap(e){
			console.log("onNavigationBarButtonTap",e);
			if(e.text=="清空"){
				let that=this;
				uni.showModal({
					title: '温馨提示',
					content: '确定要清空历史记录？',
					success(res) {
						if (res.confirm) {
							that.doClear();
						}
					}
				});
			}
		},

		methods: {
			
			/**
			 * 查询额度
			 */
			async getParamLimit() {
				let res = await this.$apis.getParamLimit();
				console.log('getParamLimit===', res);
				if (res) {
					this.aiNum=res.aiNum;
					this.setAiNum(this.aiNum);
				}
			},
			
			setAiNum(num){
				uni.setNavigationBarTitle({
					title:'智能客服 ( 剩 '+num+" 次 )"
				})
			},
			
			async doClear(){
				if (this.hasLogin) {
					let res = await this.$apis.clearAll();
					console.log('doClear==', res);
					if(res){
						this.getRobotLogList(true);
						uni.showToast({
							icon:'none',
							title:"清空完成"
						})
					}
				}
			},

			connect() {
				if (this.connected || this.connecting) {
					uni.showModal({
						content: '正在连接或者已经连接，请勿重复连接',
						showCancel: false,
					})
					return
				}
				this.connecting = true
				uni.showLoading({
					title: '连接中...',
				})
				console.log("url======", config.wsUrl)
				this.socketTask=uni.connectSocket({
					url: config.wsUrl + '/api/ws/'+this.userInfo.id,
					// url: 'wss://kpapi.nkzfw.com/api/ws/' + this.userInfo.id,
					success(res) {
						// 这里是接口调用成功的回调，不是连接成功的回调，请注意
						console.log('=====uni.connectSocket success=====', res)
					},
					fail(err) {
						// 这里是接口调用失败的回调，不是连接失败的回调，请注意
						console.log('uni.connectSocket fail', err)
					},
				})
				this.socketTask.onOpen((res) => {
					console.log("=========onSocketOpen=========",res)
					if (this.pageVisible) {
						this.connecting = false
						this.connected = true
						uni.hideLoading()

						uni.showToast({
							icon: 'none',
							title: '连接成功',
						})
						console.log('onOpen', res)
					}
				})
				this.socketTask.onError((err) => {
					console.log("========onSocketError============",err)
					if (this.pageVisible) {
						this.connecting = false
						this.connected = false
						uni.hideLoading()

						uni.showModal({
							content: '连接失败，可能是websocket服务不可用，请稍后再试',
							showCancel: false,
						})
						console.log('onError', err)
					}
				})

				this.socketTask.onMessage((res) => {
					this.received=true;
					if (this.timer) {
						clearTimeout(this.timer);
					}
					let reply = {
						my: 0,
						msg: "",
						type: 3
					};
					console.log('onMessage', res)
					if (res.data == "[DONE]") {
						reply.msg = this.tempMsg;
						this.addRobotLog(reply);
						this.tempMsg = '';
						this.msgLoad = false;
						return;
					}
					let json_data = JSON.parse(res.data)
					console.log('json_data', json_data)
					if (json_data.role) {
						this.tempMsg = '';
						this.msgList.push(reply);
					} else {
						if (!json_data.content) {} else {
							this.tempMsg = this.tempMsg + json_data.content;
							console.log('tempMsg', this.tempMsg)
						}
						this.msgList[this.msgList.length - 1].msg = this.tempMsg;
					}
					console.log('msgList', this.msgList)
					this.msgGo();
				})
				this.socketTask.onClose((res) => {
					this.connected = false
					this.msg = ''
					console.log('=========onClose===========', res)
				})
			},

			send(msg) {
				let that=this;
				this.socketTask.send({
					data: msg,
					success(res) {
						console.log(res)
						//开始倒计时
						that.startTimer();
					},
					fail(err) {
						console.log(err)
						uni.showToast({
							icon:'none',
							title:"发送失败"
						})
					},
				})
			},
			
			startTimer(){
				console.log("===startTimer==",this.timer)
				this.received=false;
				if (this.timer) {
					clearTimeout(this.timer);
				}
				this.timer = setTimeout(() => {
					console.log("===received==",this.received)
					if(this.received == false){
						uni.showToast({
							icon:'none',
							title:"抱歉，服务器开小差了，请重试"
						})
					}
				}, 3000);
			},
			

			close() {
				this.socketTask.close({
					code: 1000,
					reason: 'close reason from client',
					success(res) {
						console.log('uni.closeSocket success', res)
					},
					fail(err) {
						console.log('uni.closeSocket fail', err)
					},
				})
			},

			renderMessageDate(message, index) {
				if (message.createTime == null || message.createTime === '') {
					return "";
				}
				let time = message.createTime.replace(/-/g, '/');
				if (index === 0) {
					return this.formatDate(time);
				} else {
					let lastTime=this.msgList[index - 1].createTime.replace(/-/g, '/');
					let diff = new Date(time).getTime() - new Date(lastTime)
						.getTime();
					if (diff > 5 * 60 * 1000) {
						return this.formatDate(time);
					}
				}
				return '';
			},

			refresherrefresh() {
				console.log('refresherrefresh===');
				this.query2.pageNo++;
				this.trigger = true;
				if (this.allHistoryLoaded == false) {
					this.getRobotLogList(true);
				}
				setTimeout(() => {
					this.trigger = false;
				}, 500);
			},

			/**
			 * 查询常见问题
			 */
			async getChatAskList() {
				let res = await this.$apis.getChatAskList(this.query);
				console.log('getChatAskList===', res);
				if (res.records.length > 0) {
					this.totalPage = Math.ceil(res.total / this.query.pageSize);
					this.questionList = res.records;
					this.defaultMsg.questionList = res.records;
					this.$forceUpdate();
				}
			},

			async getRobotLogList(refresh = false) {
				if (!this.hasLogin) {
					return;
				}
				let res = await this.$apis.getRobotLogList(this.query2);
				console.log('getRobotLogList===', res);
				// 先隐藏下拉刷新的状态 
				// this.mescroll.endSuccess();
				if (res.records.length > 0) {
					let data = res.records;
					data = data.reverse();
					if (this.query2.pageNo == 1) {
						this.msgList = this.msgList.concat(data);
					} else {
						this.msgList = data.concat(this.msgList); // 注意不是this.msgList.concat
					}
					if (this.msgList.length == res.total) {
						this.allHistoryLoaded = true;
					} else {
						this.allHistoryLoaded = false;
					}
					this.msgList.push(this.defaultMsg);
					if (!refresh) {
						// 保证消息可见
						this.msgGo();
						this.$forceUpdate();
					}
				}else{
					this.msgList=[];
					this.msgList.push(this.defaultMsg);
					this.$forceUpdate();
				}
			},

			/**
			 * 添加聊天记录
			 */
			async addRobotLog(msg) {
				if (this.hasLogin) {
					let res = await this.$apis.addRobotLog(msg);
					console.log('addRobotLog==', res);
					if(res && msg.ifSendAi==1){
						this.getParamLimit();
					}
				}
			},

			switchAsks() {
				if (this.query.pageNo < this.totalPage) {
					this.query.pageNo += 1;
				} else if (this.query.pageNo == this.totalPage) {
					this.query.pageNo = 1;
				}
				this.getChatAskList();
			},

			initView() {
				// 如果需要缓存消息缓存msgList即可
				// 监听键盘拉起
				// 因为无法控制键盘拉起的速度,所以这里尽量以慢速处理
				uni.onKeyboardHeightChange(res => {
					const query = uni.createSelectorQuery();
					query
						.select('#okk')
						.boundingClientRect(data => {
							// 若消息体没有超过2倍的键盘则向下移动差值,防止遮住消息体
							var up = res.height * 2 - data.height - l * 110;
							console.log(up);
							if (up > 0) {
								// 动态改变空盒子高度
								this.msgMove(up, 300);
								// 记录改变的值,若不收回键盘且发送了消息用来防止消息过多被遮盖
								mgUpHeight = up;
							}
							// 收回
							if (res.height == 0) {
								this.msgMove(0, 0);
							}
						})
						.exec();
				});
				var query = uni.getSystemInfoSync();

				l = query.screenWidth / 750;
				wh = query.windowHeight;
				this.srcollHeight = query.windowHeight + 'px';
			},

			// 切换输入法时移动输入框(按照官方的上推页面的原理应该会自动适应不同的键盘高度-->官方bug)
			goPag(kh) {
				this.upTowmn(0, 250);
				if (this.keyHeight != 0) {
					if (kh - this.keyHeight > 0) {
						this.upTowmn(this.keyHeight - kh, 250);
					}
				}
			},
			// 移动顶部的空盒子
			msgMove(x, t) {
				var animation = uni.createAnimation({
					duration: t,
					timingFunction: 'linear'
				});

				this.animation = animation;

				animation.height(x).step();

				this.anData = animation.export();
			},
			// 保持消息体可见
			msgGo() {
				const query = uni.createSelectorQuery();
				// 延时100ms保证是最新的高度
				setTimeout(() => {
					// 获取消息体高度
					query
						.select('#okk')
						.boundingClientRect(data => {
							// 如果超过scorll高度就滚动scorll
							if (data.height - wh > 0) {
								this.go = data.height - wh;
							}
							// 保证键盘第一次拉起时消息体能保持可见
							var moveY = wh - data.height;
							// 超出页面则缩回空盒子
							if (moveY - mgUpHeight < 0) {
								// 小于0则视为0
								if (moveY < 0) {
									this.msgMove(0, 200);
								} else {
									// 否则缩回盒子对应的高度
									this.msgMove(moveY, 200);
								}
							}
						})
						.exec();
				}, 100);
			},
			// 回答问题的业务逻辑
			answer(item) {
				console.log(item);
				this.concatMsg = item.askList; //拼接信息
				let ask = {
					my: 1,
					msg: item.ask,
					type: 3
				};
				this.msgList.push(ask);
				this.addRobotLog(ask);
				let reply = {
					my: 0,
					msg: item.reply,
					type: 3
				};
				this.msgList.push(reply);
				setTimeout(() => {
					this.addRobotLog(reply);
				}, 500);
				// 保证消息可见
				this.msgGo();
			},
			sendMsg() {
				// 消息为空不做任何操作
				if (this.msg == '') {
					return 0;
				}
				//判断是否有次数
				if(this.aiNum==0){
					let that=this;
					uni.showModal({
						title:"温馨提示",
						content:"次数已经消耗完，可积分购买AI卡增加次数，是否前往？",
						success: function(res) {
							if (res.confirm) {
								console.log("xxxxxxxxxx")
								that.$mRouter.push({
									route: that.$mRoutesConfig.integralGoods,
								});
							}
						}
					})
					return;
				}
				// 显示消息 msg消息文本,my鉴别是谁发的消息(不能用俩个消息数组循环,否则消息不会穿插)
				this.msgList.push({
					msg: this.msg,
					my: 1
				});
				let ask = {
					my: 1,
					msg: this.msg,
					type: 3,
					ifSendAi:1,
				};
				this.addRobotLog(ask);
				// 保证消息可见
				this.msgGo();
				// 回答问题
				
				//判断是否需要拼接信息
				if (this.concatMsg) {
					this.msg = this.concatMsg + this.msg;
					this.concatMsg = "";
				}
				this.send(this.msg);
				
				// // #ifndef MP-WEIXIN
				// //判断是否需要拼接信息
				// if (this.concatMsg) {
				// 	this.msg = this.concatMsg + this.msg;
				// 	this.concatMsg = "";
				// }
				// this.send(this.msg);
				// // #endif
				// // #ifdef MP-WEIXIN
				// this.msgKf(this.msg);
				// // #endif

				// 清除消息
				this.msg = '';
			},
			async msgKf(x) {
				this.msgLoad = true;
				console.log("msgKf===", x);
				uni.showLoading();
				let res = await this.$apis.getChatReply({
					ask: x
				});
				console.log('getChatReply===', res);
				uni.hideLoading();
				if (res == true) {
					setTimeout(() => {
						// 取消loading
						this.msgLoad = false;
						this.msgList.push({
							my: 0,
							msg: '我不懂您在说什么哦',
							type: 0,
							questionList: this.questionList
						});
						let reply = {
							my: 0,
							msg: '我不懂您在说什么哦',
							type: 3
						};
						this.addRobotLog(reply);
						// this.msgList.push({ my: 0, msg: '单消息模板', type: -1 });
						// this.msgList.push({
						// 	my: 0,
						// 	msg: '根据您的问题,已为您匹配了下列问题(多个答案模板)',
						// 	type: 2,
						// 	questionList: ['如何注销用户', '我想了解业务流程', '手机号如何更换']
						// });
						this.msgGo();
					}, 1000);
				} else {
					console.log("xxxxxxxxxxxxxxxxxxxxx")
					this.msgLoad = false;
					this.msgList.push({
						my: 0,
						msg: res,
						type: 3
					});
					let reply = {
						my: 0,
						msg: res,
						type: 3
					};
					this.addRobotLog(reply);
					console.log(this.msgList)
				}
				// 保证消息可见
				this.msgGo();
			},
			// 不建议输入框聚焦时操作此动画
			ckAdd() {
				if (!this.showTow) {
					this.upTowmn(-180, 350);
				} else {
					this.upTowmn(0, 200);
				}
				this.showTow = !this.showTow;
			},

			contactUs() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.contactUs
				});
			},

			hideKey() {
				uni.hideKeyboard();
			},
			// 拉起/收回附加栏
			upTowmn(x, t) {
				var animation = uni.createAnimation({
					duration: t,
					timingFunction: 'ease'
				});

				this.animation = animation;

				animation.translateY(x).step();

				this.animationData = animation.export();
			}
		}
	};
</script>

<style lang="scss">
	/* @import "./main.css"; */

	body {
		background-color: #f1f1f1;
		font-size: 28upx;
		color: #333333;
		font-family: Helvetica Neue, Helvetica, sans-serif;
	}

	.round {
		border-radius: 10upx;
		padding: 6upx 15upx;
	}

	.flex {
		display: flex;
	}

	.justify-end {
		justify-content: flex-end;
	}

	.align-start {
		align-items: flex-start;
	}

	.padding-top-sm {
		padding-top: 20upx;
	}

	.padding-top {
		padding-top: 20upx;
	}

	.padding-right {
		padding-right: 20upx;
	}

	.margin-left {
		margin-left: 20upx;
	}

	.margin-top {
		margin-top: 20upx;
	}

	.bg-cyan {
		background-color: $main-color;
		color: #ffffff;
	}

	.flex-column-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.flex-column-between {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.all-history-loaded {
		font-size: 24rpx;
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		color: grey;
	}

	.flex-column-start {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.time-lag {
		margin-top: 20upx;
		font-size: 20rpx;
		text-align: center;
	}

	.time-lag-top20 {
		margin-top: 20upx;
	}

	.flex-row-start {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.flex-row-around {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}

	.flex-row-between {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.flex-row-center {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.flex-row-between {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.bottom-dh-char {
		background-color: #f9f9f9;
		/* width: 750rpx; */
		height: 110rpx;
		padding: 0 20upx;
		width: 100%;
		box-sizing: border-box;
	}

	.center-box {
		width: 720rpx;
		padding-left: 25rpx;
	}

	.my-neirong {
		font-size: 26rpx;
		color: #6d6d6d;
	}

	.my-neirong-sm {
		font-size: 23rpx;
		color: #838383;
	}

	.hui-box {
		width: 750rpx;
		height: 100%;
	}

	.dh-input {
		width: 76%;
		height: 65rpx;
		border-radius: 30rpx;
		padding-left: 15rpx;
		background-color: #ffffff;
		font-size: 30upx;
	}

	.box-normal {
		width: 750rpx;
		height: 180px;
		background-color: #ffffff;
	}

	.tb-text {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tb-text view {
		font-size: 65rpx;
	}

	.tb-text text {
		font-size: 25rpx;
		color: #737373;
		margin-top: 10upx;
	}

	.chat-img {
		border-radius: 50%;
		width: 70rpx;
		height: 70rpx;
		background-color: #f7f7f7;
	}

	.padding-chat {
		padding: 17rpx 20rpx;
	}

	.tb-nv {
		width: 50rpx;
		height: 50rpx;
	}

	.yzb-jia {
		font-size: 50upx;
		text-align: center;
		color: #666;
	}

	.yzb-jiaoseqiehuan {
		font-size: 45upx;
		text-align: center;
		color: #f0ad4e;
	}

	.yzb-yijianfankui {
		color: #f0ad4e;
	}

	.yzb-kefuguanli {
		color: #f0ad4e;
	}
</style>